<template>
  <section id="about" class="py-16 bg-neutral-100">
    <div class="container mx-auto px-4">
      <div class="flex flex-col lg:flex-row gap-12 items-start">
        <div class="lg:w-1/3">
          <div class="relative">
            <div class="absolute -inset-6 bg-gradient-to-r from-primary/20 to-secondary/20 rounded-full blur-2xl"></div>
            <img src="https://picsum.photos/id/64/500/500" alt="十一的照片"
              class="relative w-full max-w-sm mx-auto rounded-2xl shadow-lg object-cover aspect-square">
          </div>
        </div>

        <div class="lg:w-2/3">
          <h2 class="text-2xl font-serif font-bold mb-6">你好，我是十一</h2>

          <div class="prose prose-neutral max-w-none">
            <p class="text-neutral-600 mb-4 leading-relaxed">
              这个名字来源于对简单美好的向往，就像十月末的暖阳，温柔而不张扬。我是一个普通的上班族，也是一个热爱生活的记录者。
            </p>

            <p class="text-neutral-600 mb-4 leading-relaxed">
              曾经的我也在快节奏中迷失，每天忙忙碌碌，却不知道在忙什么。直到某个黄昏，我看见夕阳透过梧桐叶的光影，突然意识到生活中有太多被忽略的美好正在悄悄溜走。
            </p>

            <p class="text-neutral-600 mb-6 leading-relaxed">
              于是有了这个小小的角落——Life 拾光。我想在这里收集那些平凡却珍贵的瞬间：清晨的第一缕阳光、雨后的空气、偶然读到的动人句子，还有那些让心灵安静的时刻。
            </p>
          </div>

          <!-- 标签 -->
          <div class="flex flex-wrap gap-2 mb-6">
            <span class="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm">摄影爱好者</span>
            <span class="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm">文字收集者</span>
            <span class="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm">慢生活践行者</span>
            <span class="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm">咖啡爱好者</span>
          </div>

          <!-- 社交链接 -->
          <div class="flex gap-4">
            <a href="#"
              class="w-12 h-12 rounded-full bg-primary/10 text-primary flex items-center justify-center hover:bg-primary hover:text-white transition-colors">
              <i class="fa fa-instagram"></i>
            </a>
            <a href="#"
              class="w-12 h-12 rounded-full bg-primary/10 text-primary flex items-center justify-center hover:bg-primary hover:text-white transition-colors">
              <i class="fa fa-weibo"></i>
            </a>
            <a href="#"
              class="w-12 h-12 rounded-full bg-primary/10 text-primary flex items-center justify-center hover:bg-primary hover:text-white transition-colors">
              <i class="fa fa-envelope"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
// 关于区块不需要额外的逻辑
</script>